<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
			临时添加费率
		</view>
		
		<view class="show">
			<view class="sone">
				<input placeholder="输入套餐名字" v-model="packageName" maxlength="50"/>
			</view>
			
			<view class="mont">
				<view class="monthand">
					临时金额设置:
				</view>
				<view class="montap">
					<view>
						<view class="mtwo"><input placeholder="如：2元" v-model="first" type="digit" v-input-limit='0' maxlength="6"/><span class="mtwotxt">元</span></view>
						<view class="mtwo"><span class="mtwotxt" style='margin-right: 10upx;margin-left: 0upx;margin-top:0upx'>优惠率:</span><input v-model="disFirst" type="digit" v-input-limit='2' maxlength="4" style="width: 156upx;margin-top:20upx;margin-bottom:20upx"/></view>
					</view>
					<view>
						<view class="mtwo"><input placeholder="如：4元" v-model="second" type="digit" v-input-limit='0' maxlength="6"/><span class="mtwotxt">元</span></view>
						<view class="mtwo"><span class="mtwotxt" style='margin-right: 10upx;margin-left: 0upx;margin-top:0upx'>优惠率:</span><input v-model="disSecond" type="digit" v-input-limit='2' maxlength="4" style="width: 156upx;margin-top:20upx;margin-bottom:20upx"/></view>
					</view>
						
					<view>
						<view class="mtwo"><input placeholder="如：6元" v-model="third" type="digit" v-input-limit='0' maxlength="6"/><span class="mtwotxt">元</span></view>
						<view class="mtwo"><span class="mtwotxt" style='margin-right: 10upx;margin-left: 0upx;margin-top:0upx'>优惠率:</span><input v-model="disThird" type="digit" v-input-limit='2' maxlength="4" style="width: 156upx;margin-top:20upx;margin-bottom:20upx"/></view>
					</view>
					
					<view>
						<view class="mtwo"><input placeholder="如：8元" v-model="fourth" type="digit" v-input-limit='0' maxlength="6"/><span class="mtwotxt">元</span></view>
						<view class="mtwo"><span class="mtwotxt" style='margin-right: 10upx;margin-left: 0upx;margin-top:0upx'>优惠率:</span><input v-model="disFourth" type="digit" v-input-limit='2' maxlength="4" style="width: 156upx;margin-top:20upx;margin-bottom:20upx"/></view>
					</view>
				</view>
				<view class="monthand" style="color: red;font-size: 26upx;padding:30upx 40upx ;">
					优惠率：填值范围0-1，最多2位小数。此优惠为延长用户的充电时间;如费率配置为：0瓦 以上 1元/小时，2元档位的优惠率为0.5，则用户可充电时长为3小时；
				</view>
			</view>
			<view class="stap">
				<view class="staptxt">计时：</view>
				<view class="stapsix" @click="addshowopen">添加档位</view>
				<view class="stapone1"  v-for="(item, index) in twolist" :key="index">
					<view class="stapone1left">
						{{item.left}}-{{item.right}}瓦：
					</view>
					<view class="stapone1z">
						{{item.money}}元/小时
					</view>
					<view class="stapone1right" @click="shanbtn(index)" v-if="index==twolist.length-1">
						删除
					</view>
				</view>
				<view class="stapseven1" >
					<view class="stapsevenleft" >{{smoney}}瓦以上：</view>
					<input v-model="twohat" type="digit" placeholder="元/时"/>
					<view class="stapsevenleft1">元/时</view>
				</view>
				<view class="stapseven1" >
					<view class="stapsevenleft" style="margin-top: 0rpx;margin: 32rpx 0;width: 32%;">计费单位（分钟）：[1-60且必须为整数]</view>
					<input v-model="lscharging" type="number" v-input-limit='0'>
				</view>
				
				<view class="sfant" v-if="twotype==2">
					<van-checkbox v-model="checked" shape="square">允许退费</van-checkbox>
				</view>
				<view class="sfant" v-if="twotype==2">
					<van-checkbox v-model="stopchecked" shape="square" @change="!stopchecked && (defaultAutoStop = false)">允许充满自停</van-checkbox>
				</view>
				<view class="sfant" v-if="twotype==2">
					<view @click="!defaultAutoStop && stopchecked && (defaultAutoPopup = true)">
						<van-checkbox v-model="defaultAutoStop" shape="square" :disabled="!stopchecked">是否默认勾选充满自停</van-checkbox>
					</view>
				</view>
				<view class="stapseven" v-if="twotype==2&&checked">
					<view class="stapsevenleft">最低消费：</view>
					<input v-model="minMoney" type="digit"/>
					<view class="stapsevenleft1">元</view>
				</view>
				<view class="stapseven" v-if="twotype==2&&occNum>0">
					<view class="stapsevenleft">占位费封顶金额：</view>
					<input v-model="occupyMax" type="digit"/>
					<view class="stapsevenleft1">元</view>
				</view>
				<view class="stapseven" v-if="twotype==2&&occNum>0">
					<view class="stapsevenleft">占位费率：</view>
					<input v-model="occupyRate" type="digit"/>
					<view class="stapsevenleft1"></view>
				</view>
				<view class="stapseven" v-if="twotype==2&&occNum>0">
					<view class="stapsevenleft">免费时长(小时)：</view>
					<input v-model="occupyFree" type="digit"/>
					<view class="stapsevenleft1">小时</view>
				</view>
				<view class="staptwo" v-if="twotype==2">
					<view class="staptwohand">备注：（100字）</view>
					<textarea maxlength='100'v-model="remarks"/>
				</view>
				<view class="stapthree">
					<!-- <view class="stapthreeleft">保存</view>
					<view class="stapthreeright">删除</view> -->
					<view class="stapthreezhong" @click="xinzbtn">保存</view>
				</view>
				<view class="stapfour" v-if="twotype==2" @click="twobtn(1)">
					<view class="stapfourhand">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//up.png"></image>
					</view>
					<view class="stapfourfoot">收起更多选填参数</view>
				</view>
				<view class="stapfour" @click="twobtn(2)" v-if="twotype==1">
					<view class="stapfourfoot">展开更多选填参数</view>
					<view class="stapfourhand">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//down.png"></image>
					</view>
				</view>
				<view class="stapfive" v-if="twotype==2">
					<view class="stapfivehand">说明:</view>
					<view class="stapfivefoot">
						最低消费:填0表示不设最低消费;<br/>
						电损:适当向用户收取设备的电量损耗，填0.01-1之间的小数; 填0表示不设电损:</br>
						备注:可以在"用户扫码-查看费率"中显示，100字以内;<br/>
						<span style='color: red;'>
							计费单位：以充电时长62分钟为例：<br/>
							1、如计费单位使用默认的30分钟，则按用户充电90分钟结算；<br/>
							1、如设置计费单位为60分钟，则按用户充电120分钟结算；<br/>
							2、如设置计费单位为20分钟，则按用户充电80分钟结算；<br/>
							备注：为了减少纠纷，系统有一个一分钟的缓冲区，超过计费单位1分钟以内的将会被忽略。
						</span>
					</view>
				</view>
			</view>
		
		</view>
		<!-- //新增档位弹窗 -->
		<van-popup :show="addshow">
			<view class="tan">
				<view class="tanhand">添加档位</view>
				<view class="tanone">
					<span class="tantxt">{{onevul}}瓦</span>
					<view class="tanonetap"></view>
					<input  v-model="twovul" type="digit"/><span class="tantxt">瓦</span>
				</view>
				<view class="tantwo">
					<input placeholder="金额" v-model="moneyvul" type="digit"/><span class="tantxt">元</span>
				</view>
				<view class="tanbtn">
					<view class="tanbtnleft" @click="addshowclose">取消</view>
					<view class="tanbtnright" @click="addbtn">保存</view>
				</view>
			</view>
		</van-popup>
		<!-- 临时修改费率，默认勾选自停弹出确认框 -->
		<van-popup :show="defaultAutoPopup" class="default_auto">
			<view class="default_auto_content">某些设备不支持充满自停，请先确认设备是否支持，该功能否则不生效</view>
			<view class="default_auto_but" @click="defaultAutoPopup = false">确认</view>
		</van-popup>
	</view>
</template>

<script>
	// import {Dialog} from 'vant';
	import {section} from "../../common/section.js"
	export default {
		components: {},
		mounted() {
			
		},

		data() {
			return {
				active: '',
				projectId:'',
				twolist:[],
				twotype:1,
				addshow:false,//新增档位弹窗
				onevul:0,//弹窗第一个值
				twovul:'',//弹窗第二个值
				moneyvul:'',//弹窗金额
				checked: false,
				smoney:0,
				twohat:'',
				packageName:'',//套餐名
				first:'',//临时金额1
				second:'',//临时金额2
				third:'',//临时金额3
				fourth:'',//临时金额4
				minMoney:0,//最低消费
				remarks:'',//备注
				disFirst:0,//一元第一档费率
				disSecond:0,//一元第二档费率
				disThird:0,//一元第三档费率
				disFourth:0,//一元第三档费率
				occupyMax:0,//占位费封顶金额（充电柜）
				occupyRate:0.3,//占位费率（充电柜）
				occupyFree:2,//免费时长（充电柜）-小时
				occNum:0,//充电柜充电区数量
				stopchecked:false,//是否允许充满自停
				lscharging:30,//临时计费
				defaultAutoStop: false, // 是否默认勾选充满自停
				defaultAutoPopup: false
			}
		},
		onLoad(options) {
			this.projectId=options.projectId;
			this.occNum=options.occNum
		},
		methods: {
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},
			
			twobtn(vul){
				this.twotype=vul
			},
			
			//关闭新增档位弹窗
			addshowclose() {
				this.onevul='',
				this.twovul='',
				this.moneyvul=''
				this.addshow = false
			},
			//打开新增档位弹窗
			addshowopen() {
				if(this.twolist.length>0){
					this.onevul=Number(this.twolist[this.twolist.length-1].right)+1
					
				}else{
					this.onevul='0'
				}
				this.addshow = true
			},
			//新增
			addbtn(){
				if(!this.onevul||!this.twovul||!this.moneyvul){
					this.$toast.fail('请完善信息')
					return
				}
				if(this.onevul>this.twovul||this.onevul==this.twovul){
					this.$toast.fail('第一档不能小于或等于第二档')
					return
				}
				if(this.moneyvul==0){
					this.$toast.fail('金额不能为0')
					return
				}
				if(section(this.moneyvul)==true){
					Dialog.confirm({
					  title: '提示',
					  message: '系统检测到有非正常范围内（正常为0.2-3元）的费率金额，点击“取消”进行检查，点击“确认”继续操作！'
					}).then(() => {
					var arr={left:this.onevul,right:this.twovul,money:this.moneyvul}
					this.twolist.push(arr)
					this.smoney=Number(this.twolist[this.twolist.length-1].right)+1
					this.addshowclose();
					}).catch(() => {
						return
					});
				}else{
					var arr={left:this.onevul,right:this.twovul,money:this.moneyvul}
					this.twolist.push(arr)
					this.smoney=Number(this.twolist[this.twolist.length-1].right)+1
					this.addshowclose();
				}
				
			},
			//删除
			shanbtn(vul){
				this.twolist.splice(vul,1)
				if(this.twolist.length>0){
					this.smoney=Number(this.twolist[this.twolist.length-1].right)+1
					
				}else{
					this.smoney='0'
				}
			},
			//添加一个费率
			xinzbtn(){
				let arr=[]
				if(Number(this.occupyMax)>9999){
					this.$toast.fail('占位费上限9999元')
					return
				}
				if(!this.packageName){
					this.$toast.fail('套餐名不能为空')
					return;
				}
				if(this.twolist.length>0){
					 this.twolist.map((item,index,array)=>{
						 arr.push({'minPower':Number(item.left),'maxPower':Number(item.right),'standard':Number(item.money)})
					 })
					 
					 var map1={}
					 map1['minPower']=this.smoney
					 map1['maxPower']=this.smoney
					 map1['standard']=Number(this.twohat)
					 arr.push(map1)
					    
				}else{
					var map1={}
					map1['minPower']=this.smoney
					map1['maxPower']=this.smoney
					map1['standard']=Number(this.twohat)
					arr.push(map1)
				}
				if(!this.twohat.toString()){
					this.$toast.fail('套餐金额不能为空')
					return;
				}
				let fund=0
				if(this.checked==false){
					fund=0
					this.minMoney=0
				}else if(this.checked==true){
					fund=1
				}
				let stop=0
				if(this.stopchecked==false){
					stop=0
				}else if(this.stopchecked==true){
					stop=1
				}
				if(Number(this.first)==0 ||Number(this.second)==0||Number(this.third)==0||Number(this.fourth)==0){
					this.$toast.fail('请完善临时金额设置')
					return
				}
				if(!this.disFirst.toString()||!this.disSecond.toString()||!this.disThird.toString()||!this.disFourth.toString()){
					this.$toast.fail('请完善临时金额优惠率设置')
					return
				}
				if((this.disFirst>0.99&&this.disFirst<0)||(this.disSecond>0.99&&this.disSecond<0)||(this.disThird>0.99&&this.disThird<0)||(this.disFourth>0.99&&this.disFourth<0)){
					this.$toast.fail('优惠率介于0至1之间')
					return
				}
				if(this.lscharging==0||this.lscharging>60){
					this.$toast.fail('计费单位范围在1到60之间(包含60)')
					return;
				}
				var xarr = [];
				xarr.push(Number(this.first))
				xarr.push(Number(this.second))
				xarr.push(Number(this.third))
				xarr.push(Number(this.fourth) )
				if(Array.from(new Set(xarr)).length!=4){
					this.$toast.fail('不允许设置相同金额')
					return
				}
				let data={
					packageName:this.packageName,
					type:'C1',
					minMoney:this.minMoney,
					occupyMax:this.occupyMax,
					occupyRate:this.occupyRate,
					occupyFree:this.occupyFree,
					lossRate:0,
					isAutoStop:stop,
					isFund:fund,
					first:this.first,
					second:this.second,
					third:this.third,
					fourth:this.fourth,
					steps:arr,
					remarks:this.remarks,
					disFirst:this.disFirst,
					disSecond:this.disSecond,
					disThird:this.disThird,
					disFourth:this.disFourth,
					minutes:this.lscharging,
					defaultAutoStop: this.defaultAutoStop ? 1 : 0
				}
				if(section(this.twohat)==true||section(this.minMoney)==true){
				  Dialog.confirm({
					title: '提示',
					message: '系统检测到有非正常范围内（正常为0.2-3元）的费率金额，点击“取消”进行检查，点击“确认”继续操作！'
				  }).then(() => {
				   let header={
						'content-type': 'application/json '
					}
				   this.$base.request1('manager/rate'+'/'+this.projectId, 'POST', data,header)
					.then(res => {
						if(res.data.code==200){
							this.$toast.success('添加成功')
							uni.navigateBack()
						}else{
							this.$toast.fail(res.data.msg)
							return;
						}
					})
					.catch(err => {
						
					})
				  }).catch(() => {
					return
				  });
				}else{
				 let header={
						'content-type': 'application/json '
					}
				 this.$base.request1('manager/rate'+'/'+this.projectId, 'POST', data,header)
					.then(res => {
						if(res.data.code==200){
							this.$toast.success('添加成功')
							uni.navigateBack()
						}else{
							this.$toast.fail(res.data.msg)
							return;
						}
					})
					.catch(err => {
						
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;
		.default_auto {
			padding: 40upx;
			width: 70%;
			&_content {
				text-indent: 2em;
				margin-bottom: 40upx;
			}
			&_but {
				width: 191upx;
				height: 64upx;
				border-radius: 8upx;
				background-color: #4B98ED;
				font-size: 28upx;
				font-family: PingFang SC Medium, PingFang SC Medium-Medium;
				font-weight: 500;
				text-align: center;
				line-height: 64upx;
				color: #ffffff;
				margin: auto;
			}
		}
		.hand{
			width: 100%;
			background-color: #4B98ED;
			height: 62upx;
			font-size: 30upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 62upx;
			color: #ffffff;
			position: relative;
			image{
				width:22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 11upx;
			}
		}
		
		.show{
			
			.sone{
				width: 100%;
				box-sizing: border-box;
				padding: 0 32upx;
				margin-top: 27upx;
				input{
					// width: 100%;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: center;
					color: #999999;
					border-bottom: 1upx solid #dedede;
					margin: 0 auto;
					// padding: 25upx 0;
					width: 643upx;
					height: 56upx;
					border: 1upx solid #999999;
					border-radius: 10upx;
				}
			}
			.mont{
				width: 100%;
				box-sizing: border-box;
				.monthand{
					width: 100%;
					box-sizing: border-box;
					padding: 41upx;
					padding-bottom: 0upx;
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #333333;
				}
				.montap{
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					padding: 0 56upx;
					.mtwo{
						display: flex;
						align-items: center;
						.mtwotxt{
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							margin-top: 36upx;
							margin-left: 10upx;
						}
						input{
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							text-align: center;
							color: #999999;
							margin-top: 32upx;
							width: 255upx;
							height: 56upx;
							border: 1upx solid #999999;
							border-radius: 10upx;
						}
					}
					
				}
			}
			.stap{
				width: 100%;
				box-sizing: border-box;
				padding: 0 32upx;
				.staptxt{
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #333333;
					margin-top: 40upx;
				}
				.stapsix{
					width: 258upx;
					height: 64upx;
					border: 2upx solid #4b98ed;
					border-radius: 8upx;
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: center;
					line-height: 64upx;
					color: #4b98ed;
					margin: 0 auto;
					// margin-top: 84upx;
				}
				.stapone{
					width: 100%;
					border-bottom: 1upx solid #e8e8e8;
					margin-top: 40upx;
					display: flex;
					.staponeleft{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
						width: 35%;
					}
					input{
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						text-align: left;
						color: #999999;
					}
				}
				.stapone1{
					width: 100%;
					border-bottom: 1upx solid #e8e8e8;
					margin-top: 40upx;
					display: flex;
					// justify-content: space-between;
					align-items: center;
					.stapone1left{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
						width: 40%;
					}
					.stapone1z{
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #333333;
						width: 50%;
					}
					.stapone1right{
						font-size: 24upx;
						font-family: PingFang SC Regular, PingFang SC Regular-Regular;
						font-weight: 400;
						color: #666666;
					}
					
				}
				.sfant{
					margin: 30upx 0;
					/deep/.van-checkbox__label{
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
					}
				}
				.staptwo{
					width: 100%;
					.staptwohand{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
						margin-top: 58upx;
					}
					textarea{
						width: 100%;
						height: 243upx;
						border-radius: 16upx;
						box-sizing: border-box;
						background-color: #E5E5E5;
						padding: 32upx;
						margin-top: 23upx;
					}
				}
				.stapthree{
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin-top: 66upx;
					.stapthreezhong{
						width: 686upx;
						height: 88upx;
						border-radius: 8upx;
						background-color: #4B98ED;
						font-size: 32upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: center;
						line-height: 88upx;
						color: #ffffff;
					}
					.stapthreeleft{
						width: 333upx;
						height: 88upx;
						border-radius: 8upx;
						background-color: #4B98ED;
						font-size: 32upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: center;
						line-height: 88upx;
						color: #ffffff;
					}
					.stapthreeright{
						width: 333upx;
						height: 88upx;
						border-radius: 8upx;
						background-color: #D2D2D2;
						font-size: 32upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						text-align: center;
						line-height: 88upx;
						color: #ffffff;
					}
				}
				.stapfour{
					width: 100%;
					.stapfourhand{
						width: 100%;
						text-align: center;
						margin-top: 20upx;
						image{
							width: 22upx;
							height: 13upx;
						}
					}
					.stapfourfoot{
						margin-top: 10upx;
						width: 100%;
						font-size: 24upx;
						font-family: PingFang SC Regular, PingFang SC Regular-Regular;
						font-weight: 400;
						text-align: center;
						color: #333333;
					}
				}
				.stapfive{
					width: 100%;
					line-height: 40upx;
					.stapfivehand{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
					}
					.stapfivefoot{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 500;
						color: #333333;
					}
				}
				
				.stapseven1{
					width: 100%;
					display: flex;
					align-items: center;
					margin: 30upx 0;
					.stapsevenleft{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
						width: 30%;
					}
					.stapsevenleft1{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
						margin-left: 10upx;
					}
					input{
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #999999;
						width: 372upx;
						height: 56upx;
						border: 1upx solid #999999;
						border-radius: 10upx;
						text-align: center;
					}
				}
				.stapseven{
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 20upx;
					.stapsevenleft{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
						width: 30%;
					}
					.stapsevenleft1{
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
						margin-left: 10upx;
					}
					input{
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #999999;
						width: 372upx;
						height: 56upx;
						border: 1upx solid #999999;
						border-radius: 10upx;
						text-align: center;
					}
				}
			}
		}
		/deep/.van-popup--center{
			border-radius: 16upx;
		}
		.tan{
			width: 636upx;
			height: 465upx;
			border-radius: 16upx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			.tanhand{
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				text-align: center;
				color: #333333;
				margin-top: 40upx;
			}
			
			.tanone{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 62upx;
				.tantxt{
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					margin-left: 9upx;
				}
				input{
					box-sizing: border-box;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #999999;
					width: 157upx;
					height: 56upx;
					border: 1upx solid #999999;
					border-radius: 10upx;
					text-align: center;
				}
				.tanonetap{
					width: 60upx;
					height: 1px;
					background-color: #dddddd;
					margin:0 40upx;
				}
			}
			.tantwo{
				width: 189upx;
				margin: 0 auto;
				margin-top: 40upx;
				display: flex;
				.tantxt{
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					margin-left: 9upx;
					margin-top: 10upx;
				}
				input{
					box-sizing: border-box;
					text-align: center;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #999999;
					width: 157upx;
					height: 56upx;
					border: 1upx solid #999999;
					border-radius: 10upx;
				}
			}
			.tanbtn{
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 87upx;
				.tanbtnleft{
					width: 191upx;
					height: 60upx;
					border-radius: 8upx;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: center;
					line-height: 60upx;
					color: #ffffff;
					margin-right: 61upx;
					color: #333333;
					border: 1upx solid #333333;
				}
				.tanbtnright{
					width: 191upx;
					height: 64upx;
					border-radius: 8upx;
					background-color: #4B98ED;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: center;
					line-height: 64upx;
					color: #ffffff;
				}
			}
		}
	
	}
</style>
